<template>
	<div class="details">
		<div class="headerBox">
			<div>
				<a @click="back" style="font-size: 24px; text-decoration: none; color: white;margin-left: 10px;" href="###" class="iconfont icon-zuojiantou_huaban"></a>
				<span>uploader:</span>
				<a @click="toPersonal" href="###">
					<img src="../static/default-avatar.jpg" alt="">
				</a>
				<span>上传时间:</span>
				<span>{{imgDetail.date}}</span>
				<span>搜索标签:</span>
				<span v-for="(item,index) in imgDetail.tags" :key="index">{{item}}</span>
			</div>
			<a @click="collection" href="###" class="iconfont icon-shoucang">添加进我的收藏</a>
		</div>
		<div class="contentBox">
			<img :src="`${baseUrl}/${imgDetail.userId}/uploads/${imgDetail.imgPath}`" alt="">
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name:'imgDetails',
		data(){
			return{
				imgDetail:{},
				baseUrl:'http://127.0.0.1:5000'
			}
		},
		
		mounted(){
			this.imgDetail = JSON.parse(this.$route.query.imgDetail)
			console.log(this.imgDetail)
		},
		//获取登录用户id
		computed:{
			...mapGetters('user',['id'])
		},
		methods:{
			back(){
				this.$router.go(-2)
			},
			toPersonal(){
				this.$router.push({
					path:'/personal',
					query:{
						userId:this.imgDetail.userId
					}
				})
			},
			//用户收藏壁纸 先判断是否登录
			collection(){
				if(this.id ==null){
					alert("请先登录")
				}else{
					if(this.id == this.imgDetail.userId){
						alert("这是你自己的壁纸")
					}else{
						this.$api.userApi.collected(this.id,this.imgDetail).then((res)=>{
							if(res.status ==200&&res.data.status ==200){
								alert("收藏成功")
							}
						})
					}
					
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.details{
		min-height: 85vh;
		padding-top: 100px;
		background-color: #333;
		display: flex;
		flex-direction: column;
		align-items: center;
		.headerBox{
			width: 100%;
			margin-top: 10px;
			height: 40px;
			border-bottom:1px solid white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;
			div{
				
				display: flex;
				align-items: center;
				height: 40px;
				span{
					margin-left: 20px;
				}
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-left: 10px;
				}
			}
			
			a:last-child{
				text-decoration: none;
				color: orange;
				margin-right: 20px;
			}
		}
		
		.contentBox{
			width:85%;
			height: 500px;
			img{
				width: 100%;
				height: 500px;
			}
		}
	
	}
</style>